<template>
    <div class="search-page">
        <Header class="header" :search_val="wd"/>
        <div class="menu">
            <div class="common_container">
                <span class="menu-tag" :class="filter.ordering=='-order' ? 'tag-selectd':''"
                      @click="filter.ordering='-order'">
                    相关
                </span>
                <span class="menu-tag" :class="filter.ordering=='-pub_time' ? 'tag-selectd':''"
                      @click="filter.ordering='-pub_time'">
                    最新
                </span>
                <span class="menu-tag" :class="filter.ordering=='-score' ? 'tag-selectd':''"
                      @click="filter.ordering='-score'">
                    最好
                </span>
                <span class="menu-tag" :class="filter.ordering=='-heat' ? 'tag-selectd':''"
                      @click="filter.ordering='-heat'">
                    最热
                </span>
            </div>
        </div>
        <div class="content common_container">
            <div class="video-card" v-for="item in video_info_list">
                <div class="card-image">
                    <a :href="`/video/${item.id}`" class="card-image">
                        <img :src="item.image_url">
                    </a>
                </div>
                <div class="card-content">
                    <div class="content-title">
                        <a :href="`/video/${item.id}`">
                            <span class="card-title">{{item.title}} </span>
                        </a>
                        <span> 别名: {{item.other_title}}</span>
                        <span class="type-name">{{item.category_name}}</span>
                    </div>
                    <div class="content-row">
                        <span class="card-score">评分: {{item.score}}</span>
                    </div>
                    <div class="content-row">
                        <span style="margin-right: 20px">
                            导演: <span style="margin-right: 10px" v-for="name in item.get_directors">{{name}}</span>
                        </span>
                        <span style="margin-right: 20px">
                            演员: <span style="margin-right: 10px" v-for="name in item.get_casts">{{name}}</span>
                        </span>
                    </div>
                    <div class="content-row">
                        <span class="content-item">地区: {{item.region_name}}</span>
                        <span class="content-item">年代: {{item.period_name}}</span>
                        <span class="content-item">类型:
                            <span v-for="name in item.types_name">{{name}}、</span>
                        </span>
                    </div>
                    <div class="content-row">
                        <span>简介: {{item.desc}}</span>
                    </div>
                    <div class="content-row">
                        <div class="content-row" v-if="item.category_name === '电影'">
                            <a :href="`/video/${item.id}?pk=${section_pk}`"
                               v-for="(section_pk,i) in item.get_section_pks">
                                <div class="section-link">
                                    {{item.get_section_names[i]}}
                                    <span style="margin-left: 10px;font-size: 12px">{{item.sections_status}}</span>
                                </div>
                            </a>
                        </div>
                        <div class="content-row" v-else-if="item.category_name === '综艺'">
                            <a :href="`/video/${item.id}?pk=${section_pk}`"
                               v-for="(section_pk,i) in item.get_section_pks">
                                <div class="section-link">
                                    {{item.get_section_pubTime[i]}} 期
                                </div>
                            </a>
                        </div>
                        <div class="content-row" v-else>
                            <a :href="`/video/${item.id}?pk=${section_pk}`"
                               v-for="(section_pk,i) in item.get_section_pks">
                                <div class="section-link">
                                    {{i+1}}
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header"

    export default {
        name: "SearchPage",
        data() {
            return {
                video_info_list: [],
                wd: "",  // 搜索词
                filter: {
                    ordering: "-order"
                }
            }
        },
        methods: {
            get_search_word() {
                // 获取地址栏上面的课程ID
                this.wd = this.$route.query.wd;
                if (!this.wd) {
                    let _this = this;
                    _this.$alert("非法操作，搜索词不存在！", "警告", {
                        callback() {
                            _this.$router.go(-1)
                        }
                    });
                } else {
                    this.get_video();
                }
            },
            get_video() {
                // 定义过滤数据
                let filters = {
                    ordering: this.filter.ordering, // 排序
                };
                filters.search = this.wd;

                // 获取课程地区信息
                this.$axios.get(`${this.$settings.base_url}/video/video`, {
                    params: filters // 请求参数
                }).then(response => {
                    this.video_info_list = response.data;
                    console.log(this.video_info_list)
                }).catch(() => {
                    this.$message({
                        message: "获取电影信息有误，请联系客服工作人员",
                    })
                })
            },
        },
        components: {
            Header
        },
        created() {
            // 获取搜索词
            this.get_search_word();
        },
        watch: {
            "filter.ordering": function () {
                this.get_video()
            },
        }

    }
</script>

<style scoped>
    .header {
        background: white;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        position: relative;
    }

    .common_container {
        margin: 0 130px;
    }

    .module_mod_bottom {
        margin-bottom: 30px !important;
    }

    .menu {
        position: relative;
        margin: 30px 0;
        background: #f6f6f6;
        height: 40px;
        line-height: 40px;
    }

    .menu-tag {
        display: inline-block;
        color: #333;
        font-size: 13px;
        line-height: 28px;
        margin-right: 15px;
        margin-left: 5px;
    }

    .menu-tag:hover {
        cursor: pointer;
        color: #1f82fc;
    }

    .tag-selectd {
        border-bottom: 5px solid #1f82fc;
    }

    .content {
        padding: 20px 0;
    }

    .video-card {
        margin-bottom: 70px;
        height: 200px;
        position: relative;
    }

    .card-image {
        width: 135px;
        height: 100%;
        display: inline-block;
    }

    .card-content {
        margin: 0 30px;
        height: 100%;
        display: inline-block;
        position: absolute;
        margin-right: 5px;
    }

    .card-score {
        /*position: absolute;*/
        /*top: 87%;*/
        /*left: 85%;*/
        color: #ff5711;
        font-size: 14px;
        font-weight: 700;
    }

    .card-title {
        font-size: 24px;
    }

    .type-name {
        margin: 0 5px;
        font-size: 12px;
        font-weight: 200;
        padding: 0 3px;
        border: 1px solid #e0e0e0;
    }

    .content-title {
        margin-bottom: 15px;
    }

    .content-row {
        margin: 5px 0;
    }

    .content-item {
        margin-right: 20px;
    }
    .section-link{
        cursor: pointer;
        font-size: 14px;
        padding: 8px 16px;
        margin: 5px 10px 5px 0;
        display: inline-block;
        border-radius: 2px;
        background: #f6f6f6;
        color: #000;
    }
    .section-link:hover{
        background: #1f82fc;
        color: #FFF;
    }
    .content-section{
        font-size: 18px;
        margin: 5px 0;
    }


    img {
        border-radius: 5px;
        width: 100%;
        height: 100%;

        transform: scale(1.05, 1.05);
        transition: transform 1s;
        opacity: 3;
        background: linear-gradient(0.2deg, transparent, rgba(0, 0, 0, .6));
    }
    img:hover {
        transform: scale(1.1);
        /*transform: translateY(-7px);*/
        box-shadow: 0 0 6px #000;
    }

    a:hover {
        text-decoration: none;
    }
</style>